<template>
  <div class="w_full h_full flexcolumn">
    <div class="c_header flex aligncenter f-14 fw-6 c_text2 pl-10">
      {{ '测试测试'}}
    </div>
    <div class="c_container">
      <div class="dateposition">
        <i v-if="!dateDay" class="el-icon-date f-18 commhover icondate">
          <el-date-picker
            @change="dateChange"
            v-model="dateDay"
            type="daterange"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </i>
        <span v-if="dateDay">
          {{ dateDay[0] }} - {{ dateDay[1] }}
          <i
            class="el-icon-circle-close ml-5 commhover f-15"
            @click="handleClean"
          ></i>
        </span>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="recordtab h_full"
      >
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.name"
          :name="item.id"
        >
          <!-- {{ item.name }} -->
          <div class="tabcontent">
            <div
              v-for="(item, index) in chatList"
              :key="index"
              class="chatitem flex w_full"
            >
              <img :src="item.user.avatar" alt="" class="avatar mr-16" />
              <div class="chatitem_content">
                <div class="flex w_full c_888999 line_h_22 mb-4">
                  <span class="flex aligncenter username textover">{{
                    item.user.nickname
                  }}</span>
                  <span class="c_f90 f-12 ml-5">@{{ item.user.qiye }}</span>
                  <span class="flex ml-5">2024-04-17 14:51:05</span>
                </div>
                <div class="chatmsg flex">
                  <!-- 文本 -->
                  <div
                    v-if="item.type == 1"
                    class="chatbobble c_000 bg_fff f-15"
                  >
                    {{ item.message }}
                  </div>
                  <!-- 图片 -->
                  <div v-if="item.type == 2" class="imgbox">
                    <img :src="item.message" alt="" class="chatimg" />
                  </div>
                  <!-- 文件 -->
                  <div v-if="item.type == 3" class="imgbox">
                    <a
                      target="_blank"
                      rel="noopener noreferrer"
                      class="filebox flex aligncenter p-12 bg_fff commhover"
                      href="https://qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/90/5424982/fans/20240417/1688858345485990/file/62ac4c8a5912b14d53a4998f00aed943/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3%20%284%29.txt"
                    >
                      <img
                        v-if="findFileType(item.message) == 'txt'"
                        src="@/assets/images/txt.png"
                        alt=""
                        class="fileimg mr-10"
                      />
                      <img
                        v-if="findFileType(item.message) == 'word'"
                        src="@/assets/images/word.png"
                        alt=""
                        class="fileimg mr-10"
                      />
                      <img
                        v-if="findFileType(item.message) == 'excel'"
                        src="@/assets/images/excel.png"
                        alt=""
                        class="fileimg mr-10"
                      />
                      <div class="fileright flex11">
                        <div class="w_full textover c_text2 fw-5 line_h_22">
                          {{ item.message }}
                        </div>
                        <div class="f-12 mt-5 line_h_22" style="color: #a1a7b7">
                          512B
                        </div>
                      </div>
                    </a>
                    <!-- <img :src="item.message" alt="" class="chatimg" /> -->
                  </div>
                  <!-- 图片 -->
                  <div
                    v-if="item.type == 4"
                    class="linkbox bg_fff p-12 commhover"
                  >
                    <a
                      :href="item.message.link"
                      target="_blank"
                      class="link_a"
                    >
                      <div class="mb-10">{{ item.message.name }}</div>
                      <div class="link_bottom">
                        <div class="link_desc f-12 c_888999">
                          {{ item.message.content }}
                        </div>
                        <img :src="item.message.imgurl" alt="" class="linkimg" />
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="!chatList.length" class="epmty-content">
              <img class="empty-conver" src="@/assets/images/empty1.png" />
              <div class="empty-text">暂无数据</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="c_bottom bg_fff flexcenter">
      <el-button type="primary" size="small">发起对话</el-button>
    </div>
  </div>
</template>

<script>
import { getFileType } from "@/utils/index";
export default {
  data() {
    return {
      dateDay: "",
      activeName: "1",
      tabList: [
        { name: "全部", id: "1" },
        { name: "文本", id: "2" },
        { name: "图片", id: "3" },
        { name: "链接", id: "4" },
        { name: "语音", id: "5" },
        { name: "视频", id: "6" },
        { name: "文件", id: "7" },
        { name: "名片", id: "8" },
        { name: "小程序", id: "9" },
      ],
      chatList: [
        {
          type: 1,
          message: "【系统消息】抱歉，客服暂未上班，请留言。",
          user: {
            // 由于微信不再提供昵称，直接使用“用户”展示
            nickname: "伍丽霞",
            avatar:
              "https://wework.qpic.cn/wwpic/28019_S7rYW_ZmThm9sAK_1700632573/0",
            qiye: "锐行",
          },
        },
        {
          type: 2,
          message:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/90/5424982/fans/20240417/1688858345485990/pic/8e0ce939acae1cc79bb46eb53400ee3b.jpg",
          user: {
            // 由于微信不再提供昵称，直接使用“用户”展示
            nickname: "xxc",
            avatar: require("@/assets/images/profile.jpg"),
            qiye: "锐行",
          },
        },
        {
          type: 3,
          message: "新建文档.txt",
          user: {
            // 由于微信不再提供昵称，直接使用“用户”展示
            nickname: "xxc",
            avatar: require("@/assets/images/profile.jpg"),
            qiye: "锐行",
          },
        },
        {
          type: 3,
          message: "新建文档.docx",
          user: {
            // 由于微信不再提供昵称，直接使用“用户”展示
            nickname: "xxc",
            avatar: require("@/assets/images/profile.jpg"),
            qiye: "锐行",
          },
        },
        {
          type: 4,
          message: {
            name: "链接标题",
            content: "链接内容",
            imgurl:
              "https://rescdn.qqmail.com/node/webdoc/images/merge_word.378707c958.png",
            link: "https://doc.weixin.qq.com/doc/w3_ADoAPxTnAFk9Z118ICyTjO4om1hO0_a?scode=AAwA6QduAAoyLmsDZEAaYANgbCAPk",
          },
          user: {
            // 由于微信不再提供昵称，直接使用“用户”展示
            nickname: "xxc",
            avatar: require("@/assets/images/profile.jpg"),
            qiye: "锐行",
          },
        },
      ],
    };
  },
  props: {
    useritem: {
      type: Object,
    },
    friendItem: {
      type: Object,
    },
  },
  created() {
    console.log("useritem:", this.useritem, this.friendItem);
  },
  methods: {
    handleClick() {},

    findFileType(name) {
      return getFileType(name);
    },

    dateChange(val) {
      console.log("val:", val);
    },

    handleClean() {
      this.dateDay = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.c_header {
  padding: 16px 20px 8px;
}
.c_bottom {
  height: 50px;
}
.c_container {
  height: 0;
  flex: 1 1;
  position: relative;
}
.dateposition {
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 99;
}
.recordtab {
  ::v-deep .el-tabs__nav-wrap {
    margin: 0 15px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
  }
  ::v-deep .el-tabs__content {
    height: calc(100% - 50px);
  }
  ::v-deep .el-tab-pane {
    height: 100%;
  }
}
.tabcontent {
  height: 100%;
  overflow-y: auto;
}
.chatitem {
  padding: 10px 16px;
  position: relative;
  flex: 1 1;

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .chatitem_content {
    position: relative;
    width: calc(100% - 60px);
  }
  .chatmsg {
    max-width: 500px;
  }
  .chatbobble {
    max-width: 800px;
    min-height: 30px;
    word-break: break-all;
    padding: 6px 12px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
  }
  .username {
    max-width: calc(100% - 50px);
  }
  .chatimg {
    display: block;
    max-width: 160px;
    max-height: 160px;
    cursor: pointer;
    border-radius: 5px;
  }
  .filebox {
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    max-width: 240px;
    height: 76px;
    .fileimg {
      width: 50px;
      height: 50px;
    }
    .fileright {
      overflow: hidden;
      height: 100%;
      position: relative;
    }
  }
  .linkbox {
    border-radius: 5px;
    max-width: 240px;
    border: 1px solid #e9e9e9;
    .link_a {
      display: block;
    }
    .link_bottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .link_desc {
        width: 160px;
        line-height: 1.2;
        max-height: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .linkimg {
        width: 50px;
        height: 50px;
        object-fit: cover;
        object-position: center;
      }
    }
  }
}
.icondate {
  position: relative;
  .el-date-editor {
    position: absolute; //绝对定位
    top: 0;
    left: 0;
    opacity: 0; //设置完全透明
    width: 20px;
  }
}
.epmty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  .empty-conver {
    width: auto;
    height: 90px;
  }
  .empty-text {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
    margin-top: 10px;
  }
}
</style>